<template>
    <div class="content_main">
        <div class="page-title">{{ $t('new_game') }}</div>
        <div class="box">
            <div class="box_left">
                <div class="box_left_item" v-for="item in game_list" :key="item.id" @click="$router.push('/home/gameCenter/'+item.id)">
                    <div class="img_box">
                        <img width="100%" height="100%"
                            :src="$baseUrl+item.new_game_list_img"
                            alt="">
                    </div>
                    <div class="box_left_right">
                        <div class="gameName p">{{ item.title }}</div>
                        <!-- <div class="p" style="color: #ff6f00;"><i>評分</i> {{ item.average_score || 9.9 }}</div> -->
                        <!-- <p class="score">
                            <StarRating v-model="rating" :max-stars="5" />
                            <span class="average_score">{{item.average_score || 9.9}}分推薦</span>
                        </p> -->
                        <div class="gameBook p"  style="margin-top: 10px;margin-bottom: 5px;" >
                            <div class="gameBookNum">
                                <span class="bookNum" :title="item.desc">{{ item.desc }}</span>
                            </div>
                            
                        </div>
                        <p class="label">
                            <span v-for="(item,index) in item.tag" :key="index">{{item}}</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="box_right">
                <ListHot />
            </div>
        </div>
    </div>
</template>

<script setup>
import ListHot from "@/components/Rank/ListHot/index.vue"  
import axios from '@/utils/api'
import { reactive,ref } from "vue";
import StarRating from "@/components/StarRating/index.vue"
const rating = ref(9.3/2);

const game_list = reactive([])
const getList = async () =>{
    const list = await axios.get('/gameNewList')
    Object.assign(game_list,list.data.data)
    // console.log(game_list);
}
getList()
</script>

<style lang="less" scoped>
.page-title {
    font-size: 24px;
    color: rgba(0, 0, 0, .85);
    letter-spacing: 1px;
    line-height: 32px;
    margin-bottom: 20px;
    margin-top: 30px;
}

.box {
    display: flex;

    .box_left {
        margin-left: 0;
        width: 65%;
        .box_left_item:hover{
            box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
            .gameName{
                color: @primary-color;
            }
        }
        .box_left_item{
            transition: box-shadow .5s;
            cursor: pointer;
            box-sizing: border-box;
            border-radius: 10px;
            margin-bottom: 20px;
            transition: box-shadow .5s;
            overflow: hidden;
            display: flex;
            .img_box {
                width: 290px;
                height: 163px;
                margin: initial;
                img{
                    object-fit: cover;
                }
            }

            .gameName {
                font-size: 20px;
                color: rgba(0, 0, 0, .85);
                line-height: 28px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 300px;
            }
            .box_left_right{
                display: flex;
                flex-direction: column;
                margin: initial;
                box-sizing: border-box;
                padding: 15px 20px 0 20px;
                flex: 1;
                border: 1px solid rgba(0, 0, 0, .1);
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                border-left: none;
                position: relative;
                .score{
                    color: #ffa726 !important;
                    font-size: 13px;
                    margin: initial;
                    display: flex;
                    align-items: center;
                    margin-left: -2px;
                    .average_score{
                        margin-left: 10px
                    }
                }
                div{
                    margin: initial;
                }
                .p{
                    margin-bottom:10px ;
                }
                .gameBook{
                    position: relative;
                    display: flex;
                    margin-top: 20px;
                    .gameBookNum{
                        width: 410px;
                        .num{
                            font-size: 12px;
                            color: #98a2ab;
                            line-height: 20px;
                        }
                        .bookNum{
                            font-size: 15px;
                            color: rgb(86 86 86 / 60%);
                            margin-right: 5px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            white-space: normal;
                            word-break: break-all;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                        }
                    }
                    
                }
                .label{
                    position: absolute;
                    right: 10px;
                    bottom: 10px;
                    margin-left:50px;
                    span{
                        border: 1px solid #1281d2;
                        color: #1281d2;
                        margin-right: 5px;
                        padding: 1px 5px;
                        font-size: 12px;
                        border-radius: 10px;
                        cursor: pointer;
                    }
                    span:hover{
                        border-color: rgb(35, 119, 245);
                    }
                }
            }
        }
        
    }

    .box_right {
        width: 30%;

    }
}
</style>